@space: 24px;

.modalDefault() {
  :global {
    .ant-modal-content {
      .ant-modal-header {
        padding-top: 18px;
        padding-bottom: 0;
        border-bottom: 0;
      }

      .ant-modal-body {
        padding: @space;
      }

      .ant-modal-footer {
        padding: @space;
        padding-top: 0;
        border-top: 0;
      }

      .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
        margin-left: 16px;
      }

      .ant-input-affix-wrapper {
        border: 1px solid var(--bd-a50);
        border-radius: 5px;
      }

      .ant-btn {
        border-radius: 5px;
      }

      // .ant-btn-primary {
      //   background: #18a0fb;
      //   border-color: #18a0fb;
      // }
    }
  }
}

.modal {
  .modalDefault();

  .titleDiv {
    display: flex;
    flex-direction: row;
    align-items: center;

    .titleLogo {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }

    .title {
      font-weight: 500;
      font-size: 18px;
      font-family: PingFang SC;
      line-height: 18px;
      letter-spacing: 0;
      text-align: left;
    }
  }

  .container {
    display: flex;
    width: 100%;
    height: 400px;
    overflow: hidden;
    border: 1px solid var(--bd-a50);
    border-radius: 4px;

    .noraml {
      display: flex;
      width: 100%;
      height: 100%;

      .left,
      .center,
      .right {
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: 16px;
        overflow: hidden;
      }

      .left {
        padding: 16px;
        font-weight: 400;
        font-size: 14px;
        font-family: PingFang SC;
        line-height: 22px;
        letter-spacing: 0;
        text-align: left;
        border-right: 1px solid var(--bd-a50);

        .leftTop {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;

          .button {
            display: flex;
            flex-direction: row;
            align-items: center;
            color: var(--font-primary);
            font-size: 12px;
            cursor: pointer;

            .logo {
              width: 14px;
              height: 14px;
              margin-top: 2px;
              margin-right: 4px;
            }
          }
        }

        .leftCenter {
          flex: 1;
          margin-top: 12px;
          overflow: hidden;
          outline: none;

          .group {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .groupName {
              margin-right: 12px;
              overflow: hidden;
              color: var(--font-primary);
              font-size: 14px;
              font-family: PingFang SC;
              line-height: 22px;
              white-space: nowrap;
              text-align: left;
              text-overflow: ellipsis;
              border-bottom: 1px solid var(--bd-primary);
              cursor: pointer;
            }

            .options {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 68px;

              .edit {
                color: var(--font-primary);
                font-size: 14px;
                font-family: PingFang SC;
                line-height: 22px;
                text-align: left;
                cursor: pointer;
              }
            }
          }
        }
      }

      .center {
        flex: 1;
        border-right: 1px solid var(--bd-a50);

        .centerBottom {
          flex: 1;
          margin-top: 14px;

          .allUser {
            font-weight: 400;
            font-size: 14px;
            font-family: PingFang SC;
            line-height: 22px;
            letter-spacing: 0;
            text-align: left;
          }

          .checkboxGroup {
            display: flex;
            flex: 1;
            flex-direction: column;
            margin-top: 10px;

            .item {
              .info {
                margin-left: 22px;

                .mobile,
                .email {
                  display: flex;
                  align-items: center;
                  color: var(--font5);
                  font-size: 12px;
                  line-height: 22px;

                  .logo {
                    width: 13px;
                    margin-right: 5px;
                  }
                }
              }
            }
          }
        }
      }

      .right {
        .rightTop {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .clear {
            cursor: pointer;
          }
        }

        .content {
          flex: 1;
          margin-top: 12px;
          overflow: hidden;
          outline: none;

          div {
            outline: none;
          }

          .item {
            .name {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .close {
                display: inline-block;
                margin-right: 5px;
                color: inherit;
                font-style: normal;
                line-height: 0;
                text-align: center;
                text-transform: none;
                vertical-align: -0.125em;
                cursor: pointer;
                text-rendering: optimizeLegibility;
                -webkit-font-smoothing: antialiased;
              }
            }

            .info {
              .mobile,
              .email {
                display: flex;
                align-items: center;
                color: var(--font5);
                font-size: 12px;
                line-height: 22px;

                .logo {
                  width: 13px;
                  margin-right: 5px;
                }
              }
            }
          }
        }
      }
    }

    .edit {
      display: flex;
      width: 100%;
      height: 100%;

      .left,
      .center,
      .right {
        display: flex;
        flex: 1;
        flex-direction: column;
        box-sizing: border-box;
        padding: 16px;
        overflow: hidden;
      }

      .left {
        border-right: 1px solid var(--bd-a50);

        :global {
          .ant-form {
            .ant-form-item {
              display: flex;
              flex-direction: column;
            }
          }
        }
      }

      .center {
        border-right: 1px solid var(--bd-a50);

        .centerBottom {
          flex: 1;
          margin-top: 14px;

          .mainBox {
            width: 100%;
            height: 100%;
          }

          .checkboxGroup {
            display: flex;
            flex: 1;
            flex-direction: column;
            margin-top: 10px;

            .item {
              .info {
                .mobile,
                .email {
                  display: flex;
                  align-items: center;
                  color: var(--font5);
                  font-size: 12px;
                  line-height: 22px;

                  .logo {
                    width: 13px;
                    margin-right: 5px;
                  }
                }
              }
            }
          }

          .treeBox {
            flex: 1;
            overflow: hidden;
          }
        }
      }

      .right {
        .rightTop {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .clear {
            cursor: pointer;
          }
        }

        .choosebox {
          .box_content {
            overflow-y: auto;
          }

          .box_header {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

          .chooseList {
            margin: 0;
            padding: 0;
            color: var(--font2);
            list-style: none;

            .close {
              width: 16px;
              height: 16px;
            }

            .clear {
              color: #8c8c8c;
              cursor: pointer;
            }

            > li {
              display: flex;
              align-items: center;
              justify-content: space-between;
              height: 28px;

              .chooseName {
                flex: 1;
                overflow: hidden;
              }
            }
          }
        }

        .content {
          flex: 1;
          margin-top: 12px;
          overflow: hidden;
          outline: none;

          div {
            outline: none;
          }

          .item {
            .name {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .close {
                display: inline-block;
                margin-right: 5px;
                color: inherit;
                font-style: normal;
                line-height: 0;
                text-align: center;
                text-transform: none;
                vertical-align: -0.125em;
                cursor: pointer;
                text-rendering: optimizeLegibility;
                -webkit-font-smoothing: antialiased;
              }
            }

            .info {
              .mobile,
              .email {
                display: flex;
                align-items: center;
                color: var(--font5);
                font-size: 12px;
                line-height: 22px;

                .logo {
                  width: 13px;
                  margin-right: 5px;
                }
              }
            }
          }
        }
      }

      .treeBox {
        overflow: hidden;
      }
    }
  }
}
